import BaseChart from '@/components/echarts/BaseChart';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useMonthStore } from '@/stores/monthStore';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';


const Takeout = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo
  const curMonth = useMonthStore(state => state.month)

  const deliveryRatio = basicData.monthlyData[curMonth - 1].deliveryRatio

  // 最大值
  const max = 100;
  // 数量
  const value = parseFloat(deliveryRatio.replace('%', ''));

  // 图表配置
  const options: EChartsOption = {
    title: [
      {
        text: deliveryRatio, // 显示标题
        show: true, // 是否显示
        left: 'center', // x轴位置
        top: 'center', // y轴位置
        textStyle: { // 样式配置
          fontSize: fontSizeRem(12), // 字体大小
          color: '#fff', // 字体颜色
        },
      },
    ],
    polar: {
      center: ['50%', '50%'],
      radius: ['60%', '75%'],
    },
    angleAxis: {
      max: max,
      startAngle: 120, // 开始的角度  
      show: false,
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false, // 是否显示标签
      },
      axisLine: {
        show: false, // 是否显示轴线
      },
      axisTick: {
        show: false, // 是否显示刻度
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: '#F3F2F7',
        },
        data: [value],
        coordinateSystem: 'polar',
        itemStyle: {
          color: "#466CF7",
        },
      },
    ],
  };

  return (
    <>
      <div style={{ width: '100%', height: '17vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default Takeout;